!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
<div id="post-comment">
    <div class="comment-head">
        <div class="comment-headline">
            <i class="fas fa-comments fa-fw"></i>
            <span> 评论</span>
        </div>
    </div>
    <div class="comment-wrap">
        <div>
            <div class="vcomment v" id="vcomment">
                <div class="vpanel">
                </div>
                <div class="vcount" style="display: block; color: #e58a8a;">
                    <span class="vnum" ></span> 评论</div>
                <div class="vcards">
                    <!-- 循环each父评论 -->
                    <th:block th:each="listf:${commentsf}">
                        <div class="vcard">
                            <!--判断是否是博主邮箱头像地址true==显示博主头像false==使用api转换头像  昵称、子评论、子评论一致-->
                            <img class="vimg lazyload"
                                 th:src="${listf.getMail()}"
                                 referrerpolicy="no-referrer">
                            <div class="vh">
                                <div class="vhead">
                                    <a class="vnick" rel="nofollow" th:href="${listf.getLink()}" target="_blank" th:text="${listf.getNick()}"></a>
                                </div>
                                <div class="vmeta">
                                    <span style="color: #828282;" class="vtime" th:text="${#dates.format(listf.getCreateTime(),'yyyy-MM-dd HH:mm')}"></span>
                                    <span class="vat" th:value="${listf.getId()}">回复</span>
                                </div>
                                <div class="vcontent" data-expand="查看更多..." th:utext="${listf.getContent()}">
                                </div>
                                <div class="vreply-wrapper"></div>
                                <!--循环each子评论-->
                                <th:block th:each="listz:${commentsz}">
                                    <!--判断子回复是否与父id一致 在此出区分父评论，在评论-->
                                    <div class="vquote" th:if="${listz.getIsReply()}==${listf.getId()}" >
                                        <div class="vcard">
                                            <img class="vimg lazyload"
                                                 th:src="${listz.getMail()}"
                                                 referrerpolicy="no-referrer">
                                            <div class="vh">
                                                <div class="vhead">
                                                    <a class="vnick" th:href="${listz.getLink()}" th:text="${listz.getNick()}"></a>

                                                </div>
                                                <div class="vmeta">
                                                    <span style="color: red;" class="vtime"th:text="${#dates.format(listz.getCreateTime(),'yyyy-MM-dd HH:mm')}"></span>
                                                    <span class="vat" th:value="${listf.getId()}">回复</span>
                                                </div>
                                                <div class="vcontent" data-expand="查看更多..." th:utext="${listz.getContent()}"></div>
                                                <div class="vreply-wrapper"></div>
                                            </div>
                                        </div>
                                    </div>
                                </th:block>
                            </div>
                        </div>
                    </th:block>
                </div>
                <div class="vload-top text-center" style="display:none;">
                    <i class="vspinner" style="width:30px;height:30px;"></i>
                </div>
                <div class="vcards"></div>
                <div class="vload-bottom text-center" style="display:none;">
                    <i class="vspinner" style="width:30px;height:30px;"></i>
                </div>
                <div class="vempty" style="display: block;">
                    来发评论吧~
                </div>
                <div class="vpage txt-center" style="display:none">
                    <button type="button" class="vmore vbtn">加载更多...</button>
                </div>
            </div>
        </div>
    </div>
</div>
<link rel="stylesheet" href="/font/comment.css">
<link rel="stylesheet" href="/css/Comment.css">
<script src="/js/article.js"></script>
</body>
</html>
